<template>
  <div class="xtfh">
    <el-row style="margin-bottom: 20px">
      <div class="div-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '' }">&#12288;&#12288;主页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/gis/yxwh'}">巡查管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/gis/yxwh/rwgl'}">任务管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="kfb-icon-list-outline"></i>
          <span>符号列表</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleAdd"
            icon="el-icon-circle-plus-outline"
          >符号添加</el-button>
        </div>
        <div class="block"></div>
      </el-card>
    </el-row>
    <!--编辑-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div c>
        <el-form ref="form" :model="form" label-width="80px" label-position="right" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="符号名称" size="small" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="填充颜色" size="small" prop="description">
                <el-color-picker v-model="form.fillStyle" show-alpha></el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="符号线宽" size="small" prop="description">
                <el-slider v-model="form.lineWidth"></el-slider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线条颜色" size="small" prop="description">
                <el-color-picker v-model="form.strokeStyle" show-alpha></el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="线条颜色" size="small" prop="description">
                <el-select v-model="form.flag" size="small">
                  <el-option
                    v-for="item in types"
                    :key="types.index"
                    :value="item.name"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="示例" size="small" prop="description">
                <plot-symbol
                  ref="ps"
                  :flag="form.flag"
                  :lineWidth="form.lineWidth"
                  :strokeStyle="form.strokeStyle"
                  :fillStyle="form.fillStyle"
                  :scale="form.scale"
                  :name="form.name"
                  align="center"
                ></plot-symbol>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible= false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('form')" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, remove, update, list } from "@/api/yxwh/bhfh";
import PlotSymbol from "@/components/PlotSymbol";
import Clone from "@/utils/clone"; //克隆类
export default {
  name: "index",
  components: { PlotSymbol },
  data() {
    return {
      tableData: [],
      form: {},
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        dataUrl: [{ required: true, message: "请选择类型", trigger: "change" }]
      },
      dialogVisible: false,
      add: undefined,
      types: [{ name: "定位点" }, { name: "线" }, { name: "面" }],
      row: undefined
    };
  },
  computed: {
    title() {
      return this.add ? "添加" : "修改";
    },
    taskName() {
      return this.row ? this.row.name : "";
    }
  },
  methods: {
    getRouterParams() {
      this.row = this.$route.params;
    },
    /**
     * 编辑
     * @param index
     * @param row
     */
    handleEdit(row) {
      this.form = Clone.clone(row);
      this.dialogVisible = true;
      this.add = false;
    },
    /**
     * 删除
     * @param index
     * @param row
     */
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove(row).then(res => {
            this.tableData.splice(
              this.pageSize * (this.currentPage - 1) + index,
              1
            );
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    /**
     * 关闭
     * @param done
     */
    handleClose(done) {
      done();
    },

    /**
     * 确定
     * @param formName
     */
    handleConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.add) {
            add(this.form).then(res => {
              this.tableData.push(res.data);
              this.total = this.tableData.length;
              this.dialogVisible = false;
            });
          } else {
            update(this.form).then(res => {
              Clone.copy(this.form, this.tableData[this.index]);
              this.dialogVisible = false;
            });
          }
        } else {
          this.$message.error("数据校验未通过，请重新输入");
          return false;
        }
      });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.dialogVisible = true;
      this.add = true;
      this.form = {
        name: "", //图层名称
        flag: "定位点",
        strokeStyle: "rgba(0,0,0,1)",
        fillStyle: "rgba(255,255,255,1)",
        scale: 100,
        lineWidth: 50,
        type: 0
      };
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    /**
     * 获取页数
     */
    getData() {
      list().then(res => {
        this.tableData = res.data;
      });
    }
  },
  mounted: function() {
    this.getRouterParams();
  },
  watch: {
    "form.flag": function(n, o) {
      if (this.$refs.ps) {
        this.form.type = this.$refs.ps.icons[n].type;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.div-breadcrumb {
  border-radius: 4px;
  min-height: 48px;
  background: #99a9bf;
  display: flex;
  align-items: center;
  font-size: 24px;
}

.xtfh .el-row:first-child {
  /*margin-bottom: 20px;*/
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-dialog__body {
  padding: 0 0;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0;
}

.el-input__inner {
  border-radius: 0;
}
</style>


